<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">

  <title>悦读读书管理系统-登录</title>
  <!-- Bootstrap core CSS -->
  <!-- <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"-->
  <!-- Custom styles for this template -->
  <!-- <link th:href="@{/css/signin.css}" rel="stylesheet"> -->
  <style>
    body{
      height: 100vh;
      /* 弹性布局 居中显示 */
      display: flex;
      /* justify-content: center;*/
      /*align-items: center;*/
      /* 渐变背景 */
      background: linear-gradient(to top left,#ffe29f,#ffa99f,#ff719a);
      /* 溢出隐藏 */
      overflow: hidden;
    }
    a:link{
      text-decoration: none;
      color:#BACCD9;
    }
    a:visited{
      text-decoration: none;
      color:#BACCD9;
    }
    a:hover{
      text-decoration: none;
      color:#FFFFFF;
    }
    .menu{
      background-color: #EC8AA4;/*中国传统报春色*/
      display: flex;
      justify-content: space-between;
      height:60px;
      border-radius: 5px;
    }
    /*测试背景 body {
      background-color: #f0f0f0;
    }*/

    .menu .menur ul{
      color:#E4DFD7;/*中国传统珍珠色*/
      list-style: none;
      display:flex;
      height: 30px;
    }
    .menu .menur ul li{
      font-size: 12px;
      display:flex;
      align-items: center;
      margin:0 25px;
      cursor:pointer;
    }
    .menu .menur ul li:hover{
      color:#FFFFFF;
    }

  </style>
  <style type="text/css">

    .yd{
      font-size: 30px;
      font-weight: 888;
      letter-spacing:3px;
      position: absolute;
      margin-left:20px;
      margin-top: 10px;
      color:#E4DFD7;/*中国传统珍珠色*/
      cursor: default;
    }
    .ydds{
      font-size: 30px;
      font-weight: 888;
      letter-spacing:3px;
      position: absolute;
      margin-left:150px;
      margin-top: 10px;
      color:#E4DFD7;/*中国传统珍珠色*/
      cursor: default;
    }
    .logo{
      position: absolute;
      margin-left:48%;
      margin-top: 130px;
    }
    .img1{
      border-radius: 10px;
    }

    .dl{
      font-size: 30px;
      font-weight: 888;
      letter-spacing:2px;
      position: absolute;
      margin-left:44%;
      margin-top: 240px;
      color:#BABCD1;/*传统秋波色*/
    }
    .login{
      position: absolute;
      margin-top: 333px;
      margin-left: 42%;
    }
    .user{
      display:flex;
      justify-content: space-between;
      align-items: center;
      border-radius: 8px;
      border:solid 3px #E0E0E0;
      width:255px;
      height:42px;
    }
    .user input{
      width:240px;
      height:40px;
      font-size: 15px;
      margin-left: 10px;
      border:none;
      outline: none;
    }
    .pswd{
      margin-top: 10px;
      display:flex;
      justify-content: space-between;
      align-items: center;
      border-radius: 8px;
      border:solid 3px #E0E0E0;
      width:255px;
      height:42px;
    }
    .pswd input{
      width:240px;
      height:40px;
      font-size: 15px;
      margin-left: 10px;
      border:none;
      outline: none;
    }
    .other ul{
      list-style: none;
      display:flex;
      margin: 10px -110px;
      font-size: 10px;
      height: 20px;
    }
    .other ul li{
      margin: 0 77px;
      cursor: pointer;
      color:#EC8AA4;/*中国传统报春色*/
    }
    .sub input{
      width:240px;
      height: 40px;
      color: #E8EAED;/*传统浅云色*/
      position: absolute;
      margin-top: 24px;
      margin-left: 10px;
      border:none;
      border-radius: 8px;
      background-color: #EC8AA4;/*中国传统报春色*/
      cursor:pointer;
    }
    /* 背景方块 */
    .bg-squares{
      list-style: none;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
    }
    .bg-squares li{
      width: 40px;
      height: 40px;
      background-color: rgba(255,255,255,0.15);
      position: absolute;
      bottom: -160px;
      /* 执行动画：动画名 时长 线性 无限次播放 */
      animation: square 20s linear infinite;
    }
    /* 为每一个方块设置不同的位置、大小、动画延迟时间、动画时长、背景色 */
    .bg-squares li:nth-child(1){
      left: 10%;
    }
    .bg-squares li:nth-child(2){
      left: 20%;
      width: 80px;
      height: 80px;
      /* 动画延迟时间 */
      animation-delay: 2s;
      /* 动画时长 */
      animation-duration: 17s;
    }
    .bg-squares li:nth-child(3){
      left: 25%;
      animation-delay: 4s;
    }
    .bg-squares li:nth-child(4){
      left: 40%;
      width: 60px;
      height: 60px;
      background-color: rgba(255,255,255,0.25);
      animation-duration: 22s;
    }
    .bg-squares li:nth-child(5){
      left: 70%;
    }
    .bg-squares li:nth-child(6){
      left: 80%;
      width: 120px;
      height: 120px;
      background-color: rgba(255,255,255,0.2);
      animation-delay: 3s;
    }
    .bg-squares li:nth-child(7){
      left: 32%;
      width: 160px;
      height: 160px;
      animation-delay: 7s;
    }
    .bg-squares li:nth-child(8){
      left: 55%;
      width: 20px;
      height: 20px;
      animation-delay: 15s;
      animation-duration: 40s;
    }
    .bg-squares li:nth-child(9){
      left: 25%;
      width: 10px;
      height: 10px;
      background-color: rgba(255,255,255,0.3);
      animation-delay: 2s;
      animation-duration: 40s;
    }
    .bg-squares li:nth-child(10){
      left: 90%;
      width: 160px;
      height: 160px;
      animation-delay: 11s;
    }
    .container.success h1{
      transform: translateY(75px);
    }
    .container.success .form{
      opacity: 0;
      visibility: hidden;
    }

    /* 定义动画 */
    @keyframes square {
      0%{
        transform: translateY(0);
      }
      100%{
        transform: translateY(-120vh) rotate(600deg);
      }
    }
  </style>
</head>



<body>

<div class="menu">
  <p class="yd">YueDu</p>
  <p class="ydds">悦读读书管理系统</p>
</div>

<div class="jiemian">
  <div class="logo">
    <img class="img1" th:src="@{/img/YueDu.png}" alt="" width="72" height="72" ></div>
  <p class="dl">悦读账号登录</p>
</div>
<div class="login" >
  <form  th:action="@{/user/login2}">
    <div class="user">
      <input name="userName" type="text" th:placeholder="请输入手机号码或邮箱"  required="" autofocus="">
    </div>
    <div class="pswd">
      <input name="password" type="password" th:placeholder="请输入密码" required="">
    </div>
    <div class="other">
      <ul>
        <li>忘记密码</li>
        <li>注册账号</li>
      </ul>
    </div>
    <div class="sub">
      <input type="submit" value="登录" />
    </div>
  </form>
</div>
<ul class="bg-squares">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

</body>

<!--	<p style="color: red" th:text="${msg}"></p>
	<div class="checkbox mb-3">
		<label>
			<input type="checkbox" value="remember-me"  th:text="#{login.remember}">
		</label>
	</div>
	<button class="btn btn-lg btn-primary btn-block" type="submit" th:text="#{login.btn}">Sign in</button>
	<a class="btn btn-sm" th:href="@{/index.html(l='zh_CN')}">中文</a>
	<a class="btn btn-sm" th:href="@{/index.html(l='en_US')}">English</a>

-->
</html>
